<template>
	<view class="box">
		<view class="box1">
		<view v-for="order in xx.orders" :key="order.createtime" class="layer" @click="xlb(order.id,xx.uid)">
			
			<view class="layer2" >
				<view>订单编号: {{ order.id}}</view>
				<view>店铺名称: {{ order.shop_name }}</view>
			</view>
			<span></span>
			
			<view class="dibu">
				<view>
					<text>{{ order.createtime }}</text>
				</view>
				
				<view v-if="xx.uid ===0  " class="anniu">
	
					<view v-if="order.status==2">
						<view class="fa">
						<button class="qr" size="mini">已发货</button>
						</view>
					</view>
					<view v-else class="qr">
						<button class="qr" size="mini" @click="confirmReceipt(order.id)">确认发货</button>
					</view>
				</view>
				
				<view v-else class="anniu">
					<view v-if="order.status==2">
							<button class="qr"  size="mini" @click="confirmReceipt1(order.id)">确认收货</button>

					</view>
					<view v-else >
			<button class="qr" size="mini">未发货</button>
					</view>
					
				</view>
				
				
				
			</view>
		</view>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps
	} from 'vue';
	import { http } from '/until/request.js'

	const props = defineProps({

		xx: {
			type: Array,
			required: true,
			default: () => [] // 提供一个默认空数组，以防没有传入数据
		},

		
	});

	
	//按钮确认事件
	const confirmReceipt = async (id) => {
	    try {
	        const response = await http({
	            url: '/orders/updateStatus11/' + id,
	            method: 'PUT',
	        });
			
	        console.log('确认收货成功:', response);
	        // 收货成功后刷新页面
	
	    } catch (error) {
	        console.error('确认收货失败:', error);
	    }
	}
	
	const confirmReceipt1 = async (id) => {
	    try {
	        const response = await http({
	            url: '/orders/updateStatus1/' + id,
	            method: 'PUT',
	        });
			
	        console.log('确认收货成功:', response);
	        // 收货成功后刷新页面
	
	    } catch (error) {
	        console.error('确认收货失败:', error);
	    }
	}
	
	//点击跳转详情
	const xlb = (id,uid) => {
	console.log(uid);
		uni.navigateTo({
			url: `/pages/supplier/details/details?oid=${id}`
		});
	}
</script>

<style lang="scss">
	.fa{
		margin-right: 20rpx;
	}
	.box1{
		// border: 1px solid red;
		height: 100vh;
	}
	.box {
		overflow-y: auto;
		width: 90%;
		margin-left: 42rpx;
		height: 85vh;
		.layer {
			height: 180rpx;
			border: 1px solid #ccc;
			// width: 665rpx;
			// margin-bottom: 78rpx;
			margin-top: 45rpx;
			// display: flex;
			// flex-direction: column;
			box-shadow: 1px 7px 9px rgba(117, 160, 208, 0.3);

			.layer2 {
				margin-top: 10rpx;
				margin-left: 10rpx;
				display: flex;
				flex-direction: row;
							justify-content: space-between;
				// border: 1px solid red;
				// width: 100%;
				// height: 85rpx;
				// display: flex;
				// justify-content: space-between;
			}
			.layer3 {
				
				// border: 1px solid blue;
				// width: 100%;
				// height: 350rpx;
				// display: flex;
				// flex-direction: column;
			}
		}

		.dibu {
			margin-top: 50rpx;
			margin-left: 10rpx; 
			// border: 1px solid blue;
			width: 95%;
			height: 78rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			.anniu {
				display: flex;

				.qr {
					border: 1px solid  #0066cc ;
					margin-right: 20rpx;
					width: 100%;
					height: 50rpx;
					/* 圆角处理，使按钮看起来更柔和 */
					border-radius: 10rpx;
					/* 渐变背景色，增加视觉效果 */
					background: linear-gradient(to right,  #0066cc, #0066cc);
					color: white;
					font-size: 20rpx;
					/* 添加阴影，使按钮有悬浮感 */
					box-shadow: 2rpx 2rpx 6rpx rgba(0, 0, 0, 0.2);
					/* 添加内阴影，增强立体感 */
					box-shadow: inset 0 -2rpx 0 rgba(0, 0, 0, 0.1), 2rpx 2rpx 6rpx rgba(0, 0, 0, 0.2);
					/* 可选：添加文字阴影，使文字更清晰 */
					text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.2);
					/* 过渡效果，使鼠标悬停时按钮有变化 */
					transition: background 0.3s ease, transform 0.3s ease;

					/* 鼠标悬停时放大按钮并改变背景色 */
					&:hover {
						transform: scale(1.05);
						background: linear-gradient(to right, #0066cc,  #0066cc);
					}

					/* 如果是在移动端，可以使用active伪类代替hover */
					&:active {
						transform: scale(0.95);
						background: #005bb5;
					}
				}

			}
		}
	}
</style>